<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul {
				margin: 0;
				padding: 0;
				list-style: none;
				position: absolute;
				top: 100px;
				right: 40px;
			}
			ul li {
				height: 40px;
				background-color: #CCCCCC;
				border-bottom: 1px solid #818181;
				color: #404294;
				line-height: 40px;
				transform: translateX(155px);
				
			}
			
			ul li span {
				display: inline-block;
				width: 40px;
				height: 100%;
				background-color: #2a334f;
				color: white;
				text-align: center;
			}
			strong {
				display: inline-block;
				text-indent:15px;
			}
			ul li:hover span {
				background-color: #e3e0e8;
				color: #2a334f;
			}
			ul:hover li {
				animation: sidebar  .5s  forwards;
				/* animation-name: sidebar;
				animation-duration: .5s;
				animation-fill-mode: forwards; */
			}
			ul li:nth-child(2){
				animation-delay: 200ms;
			}
			ul li:nth-child(3){
				animation-delay: 400ms;
			}
			ul li:nth-child(4){
				animation-delay: 600ms;
			}
			ul li:nth-child(5){
				animation-delay: 0.8s;
			}
			ul li:nth-child(6){
				animation-delay: 1s;
			}
			@keyframes sidebar{
				
				to{transform: translateX(0);}
			}
		</style>
	</head>
	<body>
		<ul>
			<li><span>1</span><strong>HTML</strong></li>
			<li><span>2</span><strong>CSS</strong></li>
			<li><span>3</span><strong>JAVASCRIPT</strong></li>
			<li><span>4</span><strong>VUE</strong></li>
			<li><span>5</span><strong>Bootstrap</strong></li>
			<li><span>6</span><strong>NODEJS</strong></li>
		</ul>
	</body>
</html>
